import Base from "../base.js";
import cinemasApi from "../../api/cinemas.js";

export default class extends Base {
    // 渲染基础页面
    render() {
        this.$el.html(`
        <div>
            <div>
                <div style="margin-top:2px;">
                    <a href="/#/info/cinemas" style="font-size:16px; color:rgba(0,0,0,0.4);">影院信息</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
                    <a href="/#/info/update-cinema" style="font-size:16px;">修改影院</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i> 
                </div>
                <hr>
                <h1 style="margin:20px 40px;">修改影院</h1>
            </div>
            <div style="display:flex">
                <form action="" method="POST">
                    <div class="layui-form-item ">
                        <label class="layui-form-label" style="width:100px;">影院名称</label>
                            <div class="layui-input-inline send">
                                <input type="text" name="cinemaName" required lay-verify="required"  autocomplete="off" class="layui-input" >
                            </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label" style="width:100px;">影院地址</label>
                        <div class="layui-input-inline send">
                            <input type="text" name="cinemaAddress" required lay-verify="required"  autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label" style="width:100px;">联系电话</label>
                            <div class="layui-input-inline send">
                                <input type="text" name="cinemaPhone" required lay-verify="required"  autocomplete="off" class="layui-input" >
                            </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label" style="width:100px;">票价</label>
                            <div class="layui-input-inline send">
                                <input type="text" name="cinemaPrice" required lay-verify="required"  autocomplete="off" class="layui-input" >
                            </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label" style="width:100px;">距离</label>
                            <div class="layui-input-inline send">
                                <input type="text" name="cinemaDistance" required lay-verify="required"  autocomplete="off" class="layui-input" >
                            </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label" style="width:100px;">影院是否开启</label>
                            <div class="layui-input-inline send">
                                <input type="text" name="cinemaStatus" required lay-verify="required"  autocomplete="off" class="layui-input" >
                            </div>
                    </div>
                    <div class="layui-btn-container" style="margin-left:60px;">
                        <button type="button" style="margin-left:72px;" class="layui-btn layui-btn-sm save-btn" id="changeImg">修改图片</button>  
                        <button type="button" style="margin-left:px;" class="layui-btn layui-btn-sm save-btn" name="change-btn">确认修改</button>
                    </div>
                </form>
                <div style="flex:1;padding-left:100px">
                    <div id="main-imgs"><div>
                </div>
            </div>
        </div>
        `);

        // 从本地上获取到旧数据
        this.oldData = JSON.parse(sessionStorage.getItem("changeData"))[0];
        // 将旧数据展示在对应的input中
        $('input[name=cinemaName]').val(this.oldData.name);
        $("input[name=cinemaAddress]").val(this.oldData.address);
        $("input[name=cinemaPhone]").val(this.oldData.phone);
        $("input[name=cinemaPrice]").val(this.oldData.price);
        $("input[name=cinemaDistance]").val(this.oldData.distance);
        $("input[name=cinemaStatus]").val(this.oldData.status);
        // 获取到渲染海报的区域
        this.$mainImgs = $("#main-imgs");
        // 渲染 海报图片根据海报图片设置图片尺寸
        this.$mainImgs.html(`<img style="width:200px;height:300px" src="/resource${this.oldData.imgs[0]}">`)
        // 修改图片按钮
        this.$changeImg = $("#changeImg")
    }
    changeImg() {
        location.hash = `/#/info/upload-imgs/${this.oldData._id}`;
    }
    // 更新按钮绑定事件
    handle() {
        $("button[name=change-btn]").on("click", this.updateCinema.bind(this));
        this.$changeImg.on("click", this.changeImg.bind(this))
    }
    // 更新按钮事件
    async updateCinema() {
        // 获取更改后的数据，赋值给newdata
        let newData = {
            name: $('input[name=cinemaName]').val(),
            address: $("input[name=cinemaAddress]").val(),
            phone: $("input[name=cinemaPhone]").val(),
            price: $("input[name=cinemaPrice]").val(),
            distance: $("input[name=cinemaDistance]").val(),
            status: $("input[name=cinemaStatus]").val(),
            _id: this.oldData._id,
        };
        // 将更新后的数据传给cinemasApi的update方法，通过_id值确认修改对象
        const data = await cinemasApi.update(newData);
        console.log(data);
        //删除本地数据
        sessionStorage.removeItem("changeData");
        // 提示修改成功，并跳转到影院信息页面
        layer.msg(`修改成功`, { icon: 1 });
        location.hash = "#/info/cinemas";
    };
}